import React,{useState,useEffect} from 'react'
import { getDraft } from '../../api/draft';
import { Pagination } from 'antd';
import UploadButton from './UploadButton';

const Upload = () => {
    const [draft,setDraft] = useState({});
    const [page,setPage] = useState(1);
    const [size,setSize] = useState(10);
    useEffect(()=>{
        getDraft({page,size})
            .then(res=>{
                setDraft(res.data)
            })
    },[page,size])
    const pageChange = (page,size)=>{
        setPage(page);
        setSize(size);
    }
    return (
        <div>
            <UploadButton 
                draft={ draft }
                setDraft={setDraft}
            />
            {
                draft.content?.map(item=>{
                    return <li key={item.id}>
                        <p>{item.draftTitle}--{item.draftContext}</p>
                        <p>
                            user: {item.user.userName}
                            time: {new Date(item.draftDate).toLocaleString()}
                        </p>
                    </li>
                })
            }
            <Pagination 
                onChange={pageChange} 
                current={page} 
                total={draft.totalElements} 
            />
        </div>
    )
}

export default Upload